<template>
  <div>
    <el-card class="table-box">
      <div>
        <div class="title" style="float:left;">项目模块</div>
        <el-button
          type="primary"
          style="float:right;"
          size="mini"
          plain
          icon="el-icon-plus"
          @click="dialogVisible=true"
        >添加模块</el-button>
      </div>
      <el-table :data="modules" style="width: 100%" :show-header="false">
        <el-table-column prop="name" min-width="60px" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="80px">
          <template slot-scope="scope">
            <div style="text-align:right;">
              <el-button
                type="primary"
                plain
                size="mini"
                icon="el-icon-edit-outline"
                @click="editHandle(scope)"
              ></el-button>
              <el-button
                type="danger"
                plain
                size="mini"
                icon="el-icon-delete"
                @click="deleteModules(scope)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="添加模块" :visible.sync="dialogVisible" :before-close="handleClose">
      <el-input placeholder="请输入模块名" v-model="module_name">
        <template slot="prepend">模块名</template>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addModules">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改模块" :visible.sync="editDialogVisible" :before-close="handleClose">
      <el-input placeholder="请输入模块名" v-model="module_name">
        <template slot="prepend">模块名</template>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editModules">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { mapState } from 'vuex'

export default {
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      module_name: '',
      edit_row: '',
      editDialogVisible: false,
    }
  },
  methods: {
    ...mapActions(['getModules']),
    async addModules() {
      const response = await this.$api.addModules({
        project: this.pro.id,
        name: this.module_name,
      })
      if (response.status === 201) {
        this.$message({
          message: '添加模块成功',
          type: 'success',
          duration: 1000,
        })
        this.getModules()
      } else {
        this.$message({
          message: '添加模块失败',
          type: 'error',
          duration: 3000,
        })
      }
      this.dialogVisible = false
      this.module_name = ''
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    editHandle(scope) {
      this.module_name = scope.row.name
      this.editDialogVisible = true
      this.edit_row = scope.row
    },
    async editModules() {
      const response = await this.$api.editModules(this.edit_row.id, {
        ...this.edit_row,
        name: this.module_name,
      })
      if (response.status === 200) {
        this.$message({
          message: '修改模块成功',
          type: 'success',
          duration: 1000,
        })
        this.getModules()
      } else {
        this.$message({
          message: '修改模块失败',
          type: 'error',
          duration: 3000,
        })
      }
      this.editDialogVisible = false
      this.module_name = ''
    },
    deleteModules(scope) {
      this.$confirm('确认是否删除该模块?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const response = await this.$api.delModules(scope.row.id)
          if (response.status === 204) {
            this.$message({
              type: 'success',
              message: '删除模块成功!',
            })
          } else {
            this.$message({
              message: '删除模块失败',
              type: 'error',
              duration: 3000,
            })
          }
          this.getModules()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  computed: {
    ...mapState(['modules', 'pro']),
  },
}
</script>
<style scoped>
</style>